<!--
 * @Author: WLang
 * @LastEditors: WLang
 * @Description: 
 * @Date: 2023-06-25 22:19:22
 * @LastEditTime: 2023-06-28 15:02:52
 * @FilePath: \my-project\src\views\home\AboutUsView.vue
-->
<template>
  <div class="cq-aboutUs">
    <div class="banner">
    </div>
    <div class="wrap bgcf9">
        <div class="main-con w1200">
            <h3 class="c333 fz30 fw400 mb60">关于我们</h3>
            <div class="main-about flex">
                <div class="con-pic">
                    <img :src="decent" width="614" height="385" alt="!">
                </div>
                <div class="con-desc f255">
                    <h4 class="cff7 fz24 mb48">
                        橙券
                    </h4>
                    <p class="c666">
                        {{introduce[0]}}
                    </p>
                    <p class="c666">
                        {{introduce[1]}}
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="main-honor w1200 mb130">
        <div class="con-honor center">
            <h3 class="c333 fz30 fw400 mb60">荣誉资质</h3>
            <div class="honor-details c333">
                <ul class="flex">
                    <li v-for="item in awards" :key="item.id">
                        <img :src="$utils.getImg(item.pic)" width="300" height="340px" alt="!">
                        <p>{{item.title}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="main-contact clearfix">
        <div class="con-map">
            <img :src="map" width="1052" height="619" alt="!">
        </div>
        <div class="con-tel tl">
            <h3 class="c333 fz30 fw400 mb60">
                联系我们
            </h3>
            <ul>
                <li v-for="(value, key, idx) of  message" :key="idx">
                    <div class="tel-icon"><img :src="value['pic']" width="50" height="50" alt="!"></div>
                    <p class="c666">
                        地址<br>
                        {{value['Msg']}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  components:{},
  data(){
    return {
      decent: require('@/assets/images/tu.png'),
      map: require('@/assets/images/map.png'),
      introduce: [
        '山东鼎信网络科技有限公司(DECENT)成立于2010年，拥有近300人的专业团队，是国内领先的权益营销解决方案提供商之一，是山东省双软认证企业、国家级高新技术企业。',
        '公司自主研发的权益营销平台——橙券，运用互联网+精准营销理念，以积分和电子凭证为载体，通过金融权益、积分运营、营销支撑服务的商业模式，聚焦银行、保险、金融、传媒、互联网、通信等大型行业机构，集合生活服务类优质品牌资源，提供上下游一体的综合权益营销解决方案，提升用户体验，创造社会价值。构建“跨地域、跨品牌、多元化、融合性”的以“产业互联、创新融合”的多方共赢的生态模式。'
      ],
      awards: [
    {
      id: 0,
      title: "中国银联A类优秀供应商",
      pic: "7.png"
    },
    {
      id: 1,
      title: "2018年号卡新零售创新奖",
      pic: "22.png"
    },
    {
      id: 2,
      title: "虚拟运营商计费业务最佳服务奖",
      pic: "8.png"
    },
    {
      id: 3,
      title: "阿里汽车优秀服务商",
      pic: "9.png"
    },
    {
      id: 4,
      title: "“国家级高新技术企业”证书",
      pic: "12.png"
    },
    {
      id: 5,
      title: "软件企业认定证书",
      pic: "11.png"
    },
    {
      id: 6,
      title: "软件企业",
      pic: "23.png"
    },
    {
      id: 7,
      title: "国家信息安全等保三级认证",
      pic: "25.png"
    },
    {
      id: 8,
      title: "质量管理体系认证证书",
      pic: "24.png"
    },
    {
      id: 9,
      title: "山东省软件和信息服务业协会会员单位",
      pic: "10.png"
    },
    {
      id: 10,
      title: "增值电信业务经营许可证",
      pic: "26.png"
    },
    {
      id: 11,
      title: "跨地区增值电信业务经营许可证",
      pic: "27.png"
    }
  ],
      message: {
        location: {
          Msg: '山东省烟台市莱山区飞龙天润大厦14F',
          pic: require('@/assets/images/dz.png')
        },
        cooperation: {
          Msg: '156-6806-1789范经理（微信同号)',
          pic: require('@/assets/images/sw.png')
        },
        telephone: {
          Msg: '400-081-7007',
          pic: require('@/assets/images/kf.png')
        }
      }
    }
  },
created(){
},
mounted(){},
watch:{},
computed:{},
methods:{

},
}
</script>
<style lang="scss" scoped>
  
.banner {
  height: 250px;
  background: url(../../assets/images/banner.png) no-repeat center/cover;
}

.main-con {
  text-align: center;
  padding-top: 80px;
  padding-bottom: 114px;
}

.main-about .con-desc {
  box-sizing: border-box;
  position: relative;
  width: 719px;
  height: 401px;
  top: 42px;
  left: -133px;
  z-index: 9999;
  padding: 48px 56px;
  p {
  text-align: left;
  line-height: 30px;
  }
  h4 {
  position: relative;
  text-align: left;
  font-size: 24px;
  font-weight: 400px;
  &:after {
  position: absolute;
  top: 40px;
  left: 5px;
  content: "";
  width: 36px;
  height: 3px;
  background-color: #ff7200;
}
}
}

.main-honor {
  padding-top: 80px;
  .honor-details ul {
  flex-wrap: wrap;
}
.honor-details li {
  display: flex;
  flex-direction: column;
}
}

.main-contact .con-map {
  float: left;
  margin-right: 95px;
  img {
  width: 853px;
  height: 500px;
}
}

.main-contact .con-tel {
  float: left;
  padding-top: 77px;
  li {
  display: flex;
  margin-bottom: 40px;
  .tel-icon {
  margin-right: 29px;
}
}
}

</style>